<template>
  <div class="container">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
    </el-input>
    <VueEasyTree ref="veTree" node-key="id" class="filter-tree"  :data="data"
      :props="defaultProps" default-expand-all :filter-node-method="filterNode" show-checkbox>
    </VueEasyTree>
  </div>
</template>

<script>
import VueEasyTree from "@wchbrad/vue-easy-tree";
// 样式文件，可以根据需要自定义样式或主题
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  components: {
    VueEasyTree
  },
  created() {
    for (let i = 0; i < 2000; i++) {
      this.data[0].children[0].children.push({
        id: 10 + i,
        label: `三级 1-1-${10 + i}`
      })
    }
  },
  mounted() { },
  data() {
    return {
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleCheckChange(checkedNodes, checked, childrenChecked) {
      console.log(checkedNodes);
      console.log(checked);
      console.log(childrenChecked);
    },
  },

};
</script>

<style lang="scss" scoped>
.container {
  width: 200px;
  border: 1px solid #ccc;
  height: 80vh;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
